<template>
	<view>
		<view class="messageBox" v-for="(item, index) in message" :key="index">
			<view class="row">
				<view class="message_wrapper" @click="goDetail(item,index)">
					<view class="title">{{ item.title }}</view>
					<view class="texts">{{ item.text }}</view>
					<view class="time">{{ item.creatTime }}</view>
					<view class="type">{{item.type == 1? "公告":"通知"}}</view>
					<view class="unread" v-if="item.status == '1'"></view>
				</view>
			</view>
		</view>

		<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />




	</view>
</template>

<script>
	export default {
		data() {
			return {
				message: [

				],
				Page: {
					pageSize: 10,
					pageIndex: 1
				},
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				totalCount: 0
			}
		},
		onLoad() {
			this.init();
		},
		onReachBottom() {
			if (this.totalCount > this.message.length) {
				this.status = 'loading';
				setTimeout(() => {
					console.log("我是定时器");
					this.Page.pageIndex++
					this.init(); //执行的方法
				}, 1000)
				console.log("我比定时器先执行");
			} else { //停止加载
				this.status = 'noMore'
			}

		},
		methods: {



			async goDetail(item, index) {
				if (item.status == 1) {
					let data = await uni.$u.http
						.get(`/app/message/update/` + item.id)
					this.message[index].status = 2
					console.log(this.message[index]);
				}
				uni.navigateTo({
					url: './content?id=' + item.id
				})

			},
			init() {
				uni.$u.http
					.get('/app/message/getMessage/' + this.Page.pageIndex + '/' + this.Page.pageSize)
					.then(res => {
						this.totalCount = res.data.total
						if (res.data.total > 0) {
							const dataMap = res.data.records
							this.message = this.reload ? dataMap : this.message.concat(dataMap);
							this.reload = false;
						} else {
							this.message = [];
						}
						if (this.totalCount == this.message.length) {
							this.reload = false;
							this.status = 'noMore'
						}
					})

			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
		z-index: -55;
	}

	.add-round {
		background: url(../../../static/icon/加号.png);
		background-size: 100% 100%;
		position: fixed;
		z-index: 999;
		right: 40rpx;
		bottom: 40rpx;
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;
		color: #fff;
		text-align: center;
		line-height: 120rpx;
		font-weight: 100;
		font-size: 80rpx;
	}

	.messageBox {
		width: 94%;
		height: calc(32vw + 20px);
		// height: 180px;
		background-color: #ffffff;
		margin: 10px auto 10px;
		border-radius: 10px;
		box-shadow: 0px 2px 10px rgb(227, 227, 227);
		position: relative;
	}

	.row {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}

	.message_wrapper {
		position: relative;
		background-color: #fff;
		width: 100%;
		padding: 10px 15px 10px 40px;
		margin: 5px 0 0;
		background-color: #ffffff;
		border-radius: 7px;
	}

	.title {
		max-height: calc(18vw + 20px);
		font-size: 19px;
		font-weight: 700;
		color: #303133;
		margin: 0 0 8px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;

		// background-color: #007AFF;
	}

	.time {
		font-size: 14px;
		color: #909399;
	}

	.type {
		position: absolute;
		top: 13px;
		left: -5px;
		font-size: 12px;
		background-color: #5cd4ff;
		padding: 0 8px;
	}

	.unread {
		display: inline-block;
		background-color: #ff0000;
		position: absolute;
		top: 16px;
		right: 15px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}

	.texts {
		max-height: calc(18vw + 20px);
		font-size: 13px;
		color: #303133;
		margin: 0 0 8px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
